import React, { useEffect, useState } from 'react';
import {
  Box,
  Grid,
  GridItem,
  Input,
  MainButton,
  makeToast,
  NumberInput,
  Text,
  ThemeColorType,
} from '@nova-hf/ui';
import { CreditControlModal } from 'beta/components/creditControl-modal/CreditControlModal';
import Steps from 'beta/store/steps';
import { parseMainColor } from 'beta/utils/typeGuards';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import {
  CreditControl,
  CreditControlSettingInput,
  useAddServiceToContractMutation,
  useContractItemsLazyQuery,
  useContractSlotsQuery,
  useCustomerNameLazyQuery,
  useMobileServicesQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type ChangeUserOnNumberProps = {
  color?: ThemeColorType;
  steps: Steps;
  phoneNumber: string;
};

const ChangeUserOnNumber = ({ steps, phoneNumber, color }: ChangeUserOnNumberProps) => {
  const COLOR = parseMainColor(color ?? 'pink', 'pink');
  const { t } = useTranslation('alltSaman');
  const router = useRouter();
  const [showCreditControlModal, setShowCreditControlModal] = useState<boolean>(false);
  const [creditControls, setCreditControls] = useState<CreditControl[]>();
  const [creditControlInput, setCreditControlInput] = useState<CreditControlSettingInput[]>();
  const [serviceId, setServiceId] = useState('');
  const customerId = router.query.customerId;
  const targetContractId = (router.query.contractId as string) ?? '';
  const [nationalId, setNationalId] = useState('');
  const [name, setName] = useState('');
  const [serviceToContract] = useAddServiceToContractMutation({
    onCompleted: (data) => {
      makeToast.success(t('alltSaman.addToPackSuccess'), '');

      if (data) {
        router.push(`/beta/${router.query.customerId}/askriftir/${targetContractId}`);
      }
    },
    onError(error) {
      makeToast.danger(t('alltSaman.addToPackFail'), error.message);
    },
  });

  const { data: serviceData } = useMobileServicesQuery({
    variables: {
      input: {
        phoneNumber: phoneNumber,
      },
    },
  });

  const [getContractItems] = useContractItemsLazyQuery({
    onCompleted(data) {
      if (data?.contracts?.contracts) {
        serviceToContract({
          variables: {
            input: {
              contractId: targetContractId,
              serviceId: serviceId,
              moveConnectedContractItems: true,
              creditControlSettings: creditControlInput ?? [],
            },
          },
        });
      }
    },
  });

  useEffect(() => {
    if (serviceData) {
      const services = serviceData.mobileServices.services ?? undefined;
      const service = services !== undefined ? services[0] : undefined;
      setServiceId(service?.id ? service?.id : '');
    }
  }, [serviceData]);

  const [getCustomer, { loading, error }] = useCustomerNameLazyQuery({
    onCompleted(data) {
      if (data) {
        if (data.customer?.name && data.customer.nationalId) {
          setName(data.customer.name);
          setNationalId(data.customer.nationalId);
        }
      }
    },
  });
  const {
    data: slotsData,
    loading: slotsLoading,
    error: slotsError,
  } = useContractSlotsQuery({
    variables: {
      input: {
        contractId: targetContractId.toString(),
      },
    },
  });
  const getCreditControls = () => {
    const selectedVariant = slotsData?.contractSlots?.find((contract) =>
      contract?.variants.find(
        (variant) =>
          variant.__typename === 'ProvisionedSubscriptionVariant' &&
          variant.serviceType === 'Mobile',
      ),
    );
    if (selectedVariant) setCreditControls(selectedVariant.variants[0].creditControls);
  };

  useEffect(() => {
    getCreditControls();
    getCustomer({
      variables: { input: { id: customerId?.toString() } },
    });
  }, []);

  useEffect(() => {
    if (serviceId) {
      creditControls && creditControls.length > 0
        ? setShowCreditControlModal(true)
        : setShowCreditControlModal(false);
    }
  }, [creditControls]);

  const onSubmit = () => {
    getContractItems({
      variables: {
        input: {
          serviceId: serviceId,
        },
      },
    });
  };
  const handleConfirm = (creditControlInput?: CreditControlSettingInput[]) => {
    setCreditControlInput(creditControlInput);
    setShowCreditControlModal(false);
  };

  if (loading || slotsLoading) {
    return <Box padding={30}>Loading.....</Box>;
  }
  if (error || slotsError) {
    return <Box padding={30}>Something went wrong!</Box>;
  }

  return (
    <>
      <Box>
        <Box marginBottom={10}>
          <Text variant="h4">{t('alltSaman.changePayer')}</Text>
          <Text>{t('alltSaman.confirmInfo')}</Text>
        </Box>
        <Grid gridTemplate={{ sm: 4, md: 8 }}>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <NumberInput
              id="nationalId"
              numberType="nationalId"
              label={t('alltSaman.ssn')}
              name="service"
              value={nationalId}
              disabled
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Input id="name" label={t('alltSaman.name')} name="service" value={name} disabled />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4', md: 'span8' }}>
            <NumberInput
              id="tel"
              numberType="tel"
              label={t('alltSaman.phoneNumber')}
              name="service"
              value={phoneNumber}
              disabled
            />
          </GridItem>
          <>
            <GridItem gridColumn={{ sm: 'span4', md: '3/5' }}>
              <MainButton
                colorScheme="black100"
                text={t('alltSaman.back')}
                onClick={() => steps?.prev()}
              />
            </GridItem>
            <GridItem gridColumn={{ sm: 'span4', md: '6/8' }}>
              <MainButton
                text={t('alltSaman.confirm')}
                colorScheme={COLOR}
                onClick={onSubmit}
                isDisabled={phoneNumber.length !== 7}
              />
            </GridItem>
          </>
        </Grid>
      </Box>
      <CreditControlModal
        isVisible={showCreditControlModal}
        onVisibilityChange={(isVisible: boolean) => setShowCreditControlModal(isVisible)}
        onConfirm={(creditControlInput: CreditControlSettingInput[]) =>
          handleConfirm(creditControlInput)
        }
        creditControls={creditControls}
        color={color}
      />
    </>
  );
};

export default inject('steps')(observer(ChangeUserOnNumber));